<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="example">
		  <p>Original message: "{{ message }}"</p>
		  <p>Computed reversed message: "{{ reversedMessage }}"</p>
		  <p>Reversed message: "{{ reversedMessage() }}"</p>
	   </div>
	   <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
	   <script type="text/javascript">
              //1.绑定HTMLClass v-bind:class 
                  //1.1 对象语法
		                //1.绑定的数据对象内联定义在模版里
//		                    	 <div class="static" v-bind:class="{active:isActive,'text-danger':isActive}">class</div>
		                //2.绑定的数据对象定义在data属性里
//		                         <div class="static" v-bind:class="classObject">class</div>
//		                         data: {
//									  classObject: {
//									    active: true,
//									    'text-danger': false
//									  }
//								  }
		                //3.绑定一个返回对象的计算属性
//		                         <div class="static" v-bind:class="classObject">class</div>
//		                         data:{
//									isActive:true 
//								 },
//		                         computed:{
//								  	classObject:function(){
//								  		return{
//								  			active:this.isActive,
//								  			'text-danger':this.isActive
//								  		}
//								  	}
//							     }
                   //1.2 数组语法
//                       <div v-bind:class="[activeClass, errorClass]"></div>
//                       data: {
//							  activeClass: 'active',
//							  errorClass: 'text-danger'
//						}
                        //可以用三元表达式
//                        	<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
//                        	data: {
//	                          	isActive:true,
//							  	activeClass: 'active',
//							  	errorClass: 'text-danger'
//						 	}
                        //数组中也可以使用对象语法
//                        <div v-bind:class="[{ active: isActive }, errorClass]"></div>
            
            //2.绑定内联样式 v-bind:style
	   </script>
	</body>
</html>
